<template>
  <view class="chat-container">
    <view class="chat-box">
      <scroll-view scroll-y class="messages" :scroll-into-view="lastMessageId">
        <view 
          v-for="(message, index) in messages"
          :id="'msg'+index"
          :key="index"
          :class="['message', message.role]"
        >
          <view class="message-content">
            {{ message.content }}
          </view>
        </view>
      </scroll-view>

      <view class="input-area">
        <input
          v-model="question"
          placeholder="请输入你的问题"
          class="chat-input"
          @confirm="sendQuestion"
          :disabled="isLoading"
        />
        <button @tap="sendQuestion" :disabled="isLoading || !question.trim()">
          {{ isLoading ? "发送中..." : "发送" }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      question: "",
      messages: [],
      isLoading: false,
      baseUrl: "http://127.0.0.1:8000",
      lastMessageId: ""
    };
  },
  methods: {
    sendQuestion() {
      if (!this.question.trim() || this.isLoading) return;

      // 添加用户消息
      this.messages.push({
        role: "user",
        content: this.question.trim(),
      });

      const userMessage = this.question.trim();
      this.question = "";
      this.isLoading = true;

      uni.request({
        url: `${this.baseUrl}/app/wenxin/chat/`,
        method: "POST",
        data: { question: userMessage },
        header: { "Content-Type": "application/json" },
        success: (res) => {
          if (res.data?.status === "success") {
            this.messages.push({
              role: "assistant",
              content: res.data.response?.result || "收到空响应",
            });
          } else {
            this.messages.push({
              role: "assistant",
              content: res.data?.message || "请求失败",
            });
          }
          this.scrollToBottom();
        },
        fail: (err) => {
          this.messages.push({
            role: "assistant",
            content: "服务器连接失败",
          });
          console.error(err);
        },
        complete: () => {
          this.isLoading = false;
          this.scrollToBottom();
        }
      });
    },
    scrollToBottom() {
      if (this.messages.length > 0) {
        this.lastMessageId = 'msg' + (this.messages.length - 1);
      }
    }
  },
  onLoad() {
    this.messages.push({
      role: "assistant",
      content: "你好！我是文心一言，很高兴为您服务。",
    });
  }
};
</script>

<style scoped>
/* 使用和index.vue相同的样式 */
.chat-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px;
  height: 100vh;
  background: #f7f9fc;
}

.chat-box {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.messages {
  flex-grow: 1;
  padding: 32px;
  scroll-behavior: smooth;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafd 100%);
  min-height: calc(100vh - 200px); /* 新增最小高度保证显示区域 */
}

.message {
  margin-bottom: 24px;
  display: flex;
  animation: fadeIn 0.4s ease;
  max-width: 75%; /* 调整为75%显示比例 */
  width: fit-content; /* 新增自适应宽度 */
}

.message-content {
  padding: 16px 20px;
  border-radius: 20px;
  line-height: 1.6;
  font-size: 15px;
  word-break: break-word;
  white-space: pre-wrap;
  max-width: 100%; /* 新增防止内容溢出 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* 新增阴影 */
}

/* 调整输入区域高度 */
.input-area {
  padding: 16px 32px; /* 调整内边距 */
  min-height: 80px;
}

.chat-input {
  /* 新增自适应高度 */
  min-height: 50px;
  max-height: 120px;
  overflow-y: auto;
  transition: all 0.3s ease; /* 新增过渡动画 */
}

/* 新增输入框聚焦效果 */
.chat-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.message.user {
  margin-left: auto;
  justify-content: flex-end;
}

.message.assistant {
  margin-right: auto;
  justify-content: flex-start;
}

.message-content {
  padding: 16px 20px;
  border-radius: 20px;
  line-height: 1.6;
  font-size: 15px;
  word-break: break-word;
  white-space: pre-wrap;
}

.user .message-content {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: white;
  border-radius: 20px 20px 4px 20px;
  margin: 50px;
 
}

.assistant .message-content {
  background: #ffffff;
  color: #1f2937;
  border-radius: 20px 20px 20px 4px;
  border: 1px solid #e5e7eb;
  
}

.input-area {
  padding: 20px 32px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  gap: 12px;
  background: #ffffff;
  align-items: center;
}

.chat-input {
  flex: 1;
  height: 50px;
  padding: 0 20px;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
  font-size: 15px;
}

/* 保持其他样式与index.vue一致 */
</style>